import man from "@/assets/image/man.jpg";
import { Card, Col, Divider, Row, Typography } from "antd";
import { useEffect, useState } from "react";
import "./index.less"; // 需创建同名样式文件

const { Title, Paragraph } = Typography;

export default function ConTact() {
  // 移动端判断（可选，用于自定义逻辑）
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth <= 768);
    };
    checkMobile();
    window.addEventListener("resize", checkMobile);
    return () => window.removeEventListener("resize", checkMobile);
  }, []);

  return (
    <div className="about-page">
      {/* 页面标题（PC/移动端通用） */}
      <Title level={3} className="page-title">
        联系我们 | 联系Alexander handsome man
      </Title>

      {/* Alexander handsome man */}
      <Divider />

      <Row gutter={[24, 24]} justify="center" className="content-row">
        <Col xs={24} md={20} lg={18}>
          <Card title="🛫" bordered={false} className="info-card">
            <img src={man} width={"100%"} alt="" />
          </Card>
        </Col>
      </Row>
      {/* 响应式内容布局 */}
      <Row gutter={[24, 24]} justify="center" className="content-row">
        <Col xs={24} md={20} lg={18}>
          <Card
            title="联系Alexander big man"
            bordered={false}
            className="info-card"
          >
            <Paragraph ellipsis={{ rows: isMobile ? 3 : 5 }}>
              Email：
              <a href="mailto:1636945375@qq.com" style={{ color: "inherit" }}>
                1636945375@qq.com
              </a>
              <br />
            </Paragraph>
          </Card>
        </Col>
      </Row>
    </div>
  );
}
